<template>
	<view id="customPage">
		<view class="title">
			选择制定
		</view>
		<view class="sec-wrapper">
			<view class="sec" v-for="(item,index) in designTypes" :class="{checked: item.checked}" :key="item.id" @click="checkChange('designTypes',index)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			请选择型号区间
		</view>
		<view class="sec-wrapper">
			<view class="sec" v-for="(item,index) in types" :class="{checked: item.checked}" :key="item.id" @click="checkChange('types',index)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			选择组数
		</view>
		<view class="sec-wrapper">
			<view class="sec" v-for="(item,index) in groups" :class="{checked: item.checked}" :key="item.id" @click="checkChange('groups',index)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			单根定制长度<text class="ut">（毫米）</text>
		</view>
		<view class="sec-wrapper num-box">
			<!-- <uni-number-box :min="1" :max="9999" @change="numChange"></uni-number-box> -->
			<input type="number" class="num-inp" @change="numChange" placeholder="请输入定制长度" />
			
		</view>
		<view class="foooter-next" @click="toNext">
			下一步
		</view>
		
		<tel-modal :visable="telVisable" @close="telVisable=false"></tel-modal>
		<cart-modal v-if="showCartModal" :collected="collected" @telClick="telClick" @join="join" @buy="buy" @collectClick="collectClick" @close="close"></cart-modal>
		<!-- <join v-if="showJoin" @close="joinClose" @join="joinClicked"></join>
		<buy v-if="showBuy" @close="buyClose" @buy="buyClicked"></buy> -->
		<operationModal :url="url" :txt="txt" :visable="showOpe" @close="opeModalClose"></operationModal>
	</view>
	
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import operationFooter from "@/components/operation-footer/operation-footer.vue"
	import cartModal from "@/components/cart-modal/cart-modal.vue"
	import telModal from "@/components/tel-modal/tel-modal.vue"
	import operationModal from "@/components/operation-modal/operation-modal.vue"
	import join from "@/components/join/join.vue"
	import buy from "@/components/buy/buy.vue"
	import { designTypes, types, groups } from '../../utils/data.js'
	export default {
		components: {uniNumberBox,operationFooter,cartModal,operationModal,telModal,join,buy},
		data() {
			return {
				designTypes,
				types,
				groups,
				showCartModal: false,
				telVisable: false,
				showJoin: false,
				showOpe: false,
				showBuy: false,
				url: '../../static/img/success.png',
				txt: '添加购物车成功',
				collected: false
			}
		},
		methods: {
			
			telClick() {
				this.telVisable = true
			},
			collectClick() {
				this.collected = !this.collected
				this.showOpe = true
				this.url = '../../static/img/success.png'
				this.txt = (this.collected ? '' : '取消') + '加入购物车成功'
			},
			join() {
				this.joinClicked()
				// this.showJoin = true
			},
			joinClose() {
				this.showJoin = false
			},
			joinClicked() {
				this.showOpe = true
			},
			buy() {
				this.buyClicked()
				// this.showBuy = true
			},
			buyClose() {
				this.showBuy = false
			},
			buyClicked() {
				uni.navigateTo({
					url: '../order/order',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			opeModalClose() {
				this.showOpe = false
			},
			
			
			
			
			
			
			
			
			numChange() {
				
			},
			checkChange(type, i) {
				
				this[type] = this[type].map((item,index) => {
					item.checked = i === index
					return item
				})
			},
			close() {
				this.showCartModal = false
			},
			toNext() {
				this.showCartModal = true
			}
		}
	}
</script>

<style>
#customPage {
	padding:0 0 0 28upx;
}
.title {
	margin-top: 40upx;
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
}
.sec {
	width:160upx;
	height:66upx;
	background:rgba(248,248,248,1);
	border-radius:4upx;
	margin: 28upx 18upx 0 0;
	text-align: center;
	line-height: 66upx;
	font-size: 24upx;
	color: #666666;
	display: inline-block;
}
.sec.checked {
	background: transparent url(../../static/img/checked_label.png) center ceter no-repeat;
	background-image: url(../../static/img/checked_label.png);
	background-size: contain;
	color: #FFFFFF;
}
.num-box {
	margin-top: 38upx;
	display: flex;
	align-items: center;
}
.num-inp {
	width: 360upx;
	border-radius: 4upx;
	border: 1upx solid #C0C0C0;
	padding: 10upx;
	margin-right: 10upx;
}
.ut {
	color: #999999;
	font-size: 28upx;
}
</style>
